<template>
  <el-card>
    <el-tabs>
      <!-- 购物车商品 -->
        <el-table
            :data="Goods"
            style="width: 100%;"
            border
            :header-cell-style="{background:'#D2B48C',color:'#FFFFFF'}"
            @select="handleSum"
            @select-all="handleSum"
            ref="multipleTable">
          <!-- 复选框 -->
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="id" label="模型id" align="center"></el-table-column>
          <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="price" label="金额" align="center">
            <template slot-scope="scope">
              <span>￥{{scope.row.price}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete('123456789',scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <h3>总价：<span style="color: red;">￥{{sum}}</span></h3>
        </div>
      <el-button icon="el-icon-goods" @click="linktogoods" type="primary">查看商品</el-button>
      <el-button icon="el-icon-bank-card" @click="dialogVisible = true" type="success">结算购物车</el-button>
      <el-button icon="el-icon-delete-solid" @click="deleteGoods('123456789')" type="warning">清空购物车</el-button>
      <el-button icon="el-icon-house" @click="linktohello" type="info">返回主页</el-button>
      <el-dialog
          title="购物车结算"
          :visible.sync="dialogVisible"
          width="50%"
          :before-close="handleClose">
        <div>
          <h1>总价：<span style="color: red;">￥{{sum}}</span></h1>
        </div>
        <el-button type="success" disabled plain>微信支付</el-button>
        <el-button type="primary" @click="alibuy(sum)" plain>支付宝支付</el-button>
        <el-button type="danger" @click="unionbuy(sum)" plain>银联支付</el-button>
      </el-dialog>
    </el-tabs>
  </el-card>
</template>

<script>
import Qs from "qs";

export default {
  name: "Goodscart",
  data() {
    return {
      sum: 0,
      // 添加进购物车的商品数组
      Goods: [],
      dialogVisible:false
    }
  },
  created(){
    this.axios.post('/api/goodscart',Qs.stringify({userid:'123456789'}))
        .then(res => {
          this.Goods = res.data
        })
        .catch(function (error){
          console.log(error)
        })
  },
  methods: {
    // 计算总额
    handleSum() {
      this.sum = 0;
      this.$nextTick(() => {
        this.$refs.multipleTable.selection.forEach(item => {
          this.sum += item.price
        });
      })
    },
    // 删除商品操作
    handleDelete(userid,id) {
      this.$axios.post('/api/deletefromcart',Qs.stringify({userid:userid,id:id}))
          .then(res => {
            this.Goods = res.data
          })
          .catch(function (error){
            console.log(error)
          })
    },
    //清空购物车
    deleteGoods(userid){
      this.$axios.post('/api/deleteallgoods',Qs.stringify({userid:userid}))
          .then(res => {
            this.Goods = res.data
          })
          .catch(function (error){
            console.log(error)
          })
    },
    //购物车付款
    alibuy(sum){
      if(sum != 0){
        this.axios.post('/api/alipay',{id:'00000000',name:'购物车结算',price:sum})
            .then(res => {
              document.querySelector('body').innerHTML = res.data
              document.forms[0].submit()
            })
            .catch(function (error){
              console.log(error)
            })
      }
    },
    unionbuy(sum) {
      if(sum != 0){
        this.axios.post('/api/unionpay',{id:'00000000',name:'购物车结算',price:sum})
            .then(res => {
              document.querySelector('body').innerHTML = res.data
              document.forms[0].submit()
            })
            .catch(function (error){
              console.log(error)
            })
      }
    },
    //关闭支付页面
    handleClose(done) {
      this.$confirm('取消结算，确认关闭？')
          .then(() => {
            done();
          })
          .catch(() => {});
    },
    //查看商品页面
    linktogoods(){
      this.$router.push('/fornt')
    },
    //返回主页
    linktohello() {
      this.$router.push('/')
    }
  }
}
</script>